<template>
	<view class="">
		<view class="homography" @click.stop="$ROUTELINK('/pageA/shop/particulars?shop_id=' + query.shop_id)">
			<image :src="query.image" class="shop_img" mode="aspectFill"></image>
			<view class="info_right_box" :style="{width:right_width}">
				<view class="header_title">
					<image :src="query.category_image" mode="aspectFill" class="darg" v-if="query.category_image"></image>
					<view class="title">
						{{query.name}}
					</view>
				</view>
				<view class="business_hours">
					<view class="business_left">
						<view class="official"
							:style="{color:(query.manage == 1 ?'#73F0EA':query.manage == 2 ?'#B6B6B6':'#EAAF3B')}">
							{{query.manage_str}}
						</view>
			
						<view class="concrete_time" >
							{{query.manage_time}}
						</view>
						<view class="size1" >
							{{query.label}}
						</view>
					</view>
					<view class="navigation" @click="routeMapnavgation">
						<image :src="$IMG_URL('/static/newVersion/navigation.png')" mode="aspectFill" class="logo"></image>
						<view class="size">
							{{query.distance}}
						</view>
					</view>
				</view>
				<view class="address">
					{{query.address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			},
			right_width:{
				type:String,
				default:''
			}
		},
		methods:{
			routeMapnavgation(){
				let that = this
				uni.openLocation({
					latitude: Number(that.query.lat), //要去的纬度-地址
					longitude: Number(that.query.long), //要去的经度-地址
					address: that.query.address, //要去的具体地址
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.homography{
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		.shop_img {
			width: 168rpx;
			height: 168rpx;
			background: rgba(0, 0, 0, 0.00);
			border-radius: 16rpx;
			margin-right: 20rpx;
		}
		
		.info_right_box {
			display: flex;
			flex-direction: column;
			// flex: 1;
			width:518rpx;
		
			.header_title {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 6rpx;
		
				.darg {
					width: 114rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
		
				.title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap
				}
			}
		
			.business_hours {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 12rpx;
				width: 100%;
		
				.business_left {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
				}
		
				.official {
					font-size: 24rpx;
					font-weight: 500;
					// color: #73F0EA;
				}
		
				.concrete_time {
					margin: 0 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
		
				.size1 {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
		
				}
		
				.navigation {
					display: flex;
					flex-direction: row;
					align-items: center;
		
					.logo {
						width: 22rpx;
						height: 22rpx;
					}
		
					.size {
						font-size: 24rpx;
						font-weight: 500;
						color: #73F0EA;
					}
				}
			}
		
			.address {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 限制显示的行数 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 显示省略号 */
				white-space: normal;
				/* 处理空白符 */
			}
		}
	}
</style>